<template>
    <div>
        <div class="title">热销推荐</div>
        <div class="list">
            <ul>
                <li v-for="(item,index) in list" :key="index">
                    <div class="pic_box">
                        <img :src="item.imgUrl" />
                    </div>
                    <div class="cont">
                        <div class="tit">{{item.title}}</div>
                        <div class="desc">{{item.desc}}</div>
                        <div class="btn">查看详情</div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name:'homerecommand',
        props:['list'],
        data(){
            return{
                // recommendList:[
                //     {
                //         imgUrl:'http://img1.qunarzz.com/sight/p0/1609/7a/7ae8ee7831836095a3.water.jpg_200x200_36727f69.jpg',
                //         title:'金海湖风景区',
                //         desc:'轻松水上漂，任我乐逍遥'
                //     },
                //      {
                //         imgUrl:'http://img1.qunarzz.com/sight/p0/1803/12/126471e0966aca5ba3.img.jpg_200x200_f1286016.jpg',
                //         title:'北京国际鲜花港',
                //         desc:'轻松水上漂，任我乐逍遥'
                //     },
                //      {
                //         imgUrl:'http://img1.qunarzz.com/sight/p0/1508/a5/4003f9dd7bebf61eccbf64046e26d487.water.jpg_200x200_7690e4cd.jpg',
                //         title:'北京欢乐谷',
                //         desc:'轻松水上漂，任我乐逍遥'
                //     },
                //      {
                //         imgUrl:'http://img1.qunarzz.com/sight/p0/201405/23/0265195fc4b7913a758674357c3cc8f6.jpg_200x200_b58ea00b.jpg',
                //         title:'北京欢乐水魔方',
                //         desc:'轻松水上漂，任我乐逍遥'
                //     },
                //      {
                //         imgUrl:'http://img1.qunarzz.com/sight/p0/1804/c8/c88bb5e69c9a9c5ea3.img.jpg_200x200_740720ff.jpg',
                //         title:'古北水镇',
                //         desc:'轻松水上漂，任我乐逍遥'
                //     }
                // ]
            }
        }
    }
</script>

<style scoped lang="stylus">
    .title
        margin-top  0.2rem
        font-size   0.34rem
        line-height 0.8rem
        background  #eee
        margin  0.3rem 0
        padding 0 0.2rem
        font-weight bold
    .list ul li
        width   7.1rem
        margin-left auto
        margin-right    auto
        display flex
        border-bottom   1px solid #ddd
        padding 0.2rem 0
        box-sizing  border-box
        .pic_box
            width   1.7rem
            height  1.7rem
            overflow    hidden
            img
                width   100%
                height  auto
        .cont
            flex    1
            min-width   0
            padding-left    0.3rem
            .tit
                font-size   0.32rem
                line-height 0.5rem
                color   #333
                overflow    hidden
                text-overflow   ellipsis
                white-space nowrap
            .desc
                font-size   0.26rem
                line-height 0.4rem
                color   #999
                overflow    hidden
                text-overflow   ellipsis
                white-space nowrap
            .btn
                background  #ff9300
                padding 0 0.15rem
                border-radius   0.05rem
                margin-top  0.1rem
                font-size   0.24rem
                line-height 0.5rem
                display inline-block
                color   #fff
</style>